<template>
  <h1>地图</h1>
  <div id="container"></div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";




var map;

onMounted(() => {
  map = new BMapGL.Map(document.querySelector("#container"));
  var point = new BMapGL.Point(116.404, 39.915);
  map.centerAndZoom(point, 15);
  map.setHeading(64.5);   //设置地图旋转角度
  map.setTilt(73);       //设置地图的倾斜角度
  // map.setMapType(BMAP_EARTH_MAP);
  var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
  map.addControl(cityCtrl);
  console.log(cityCtrl._map.cityName);
  map.centerAndZoom('西安市', 12); // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
});


</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 500px;
  border-radius: 20px;
}
</style>
